<script setup>
import {ref, onMounted, reactive, defineEmits, defineProps, watch} from "vue";
import {listByModelType} from "@/api/llm"
import {getUserLLM, addUserLLM} from "@/api/user_llm"
import {ElMessage} from "element-plus"
const addSetupDom = ref()

const modelList = ref([])

const formData = ref({
  chatModel: "",
  embeddingModel: "",
  img2txtModel: "",
  sequence2txtModel: "",
  rerankModel: "",
  ttsModel: ""
})

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  }
})

const dialogVisible = ref(false)

watch(props, (newValue, oldValue) => {
  dialogVisible.value = newValue.modelValue
  if(newValue.modelValue) {
    getLLM()
    getModelList()
  }
  formData.value = {
    chatModel: "",
    embeddingModel: "",
    img2txtModel: "",
    sequence2txtModel: "",
    rerankModel: "",
    ttsModel: ""
  }
});

const chatModels = ref([]) // 聊天模型
const embeddingModels = ref([])
const img2txtModels = ref([])
const sequence2txtModels = ref([])
const rerankModelModels = ref([])
const ttsModels = ref([])

const getLLM = () => {
  getUserLLM().then(res => {
    if (res.data) {
      formData.value = res.data
    }
  })
}

const getModelList = () => {
  listByModelType().then(res => {
    modelList.value = res.data
    chatModels.value = modelList.value["chat"] || []
    embeddingModels.value = modelList.value["embedding"] || []
    sequence2txtModels.value = modelList.value["sequence2txt"] || []
    img2txtModels.value = modelList.value["img2txt"] || []
    rerankModelModels.value = modelList.value["rerank"] || []
    ttsModels.value = modelList.value["tts"] || []
  })
}

onMounted(() => {
  getLLM()
  getModelList()
})


const emits = defineEmits(['update:modelValue'])

const handleClose = (done) => {
  done()
}

const close = () => {
  emits("update:modelValue", false)
}

const rules = {
  chatModel: [{required: true, message: '请选择聊天模型', trigger: 'change'}],
  embeddingModel: [{required: true, message: '请选择嵌入模型', trigger: 'change'}]
}

// 测试方法
const onSubmit = () => {
  console.log('提交数据', formData)
  // 开始校验
  addSetupDom.value.validate(valid => {
    if(valid) {
      addUserLLM(formData.value).then(res => {
        ElMessage.success("保存成功")
        close()
      })
    }
  })
}

</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      title="系统模型设置"
      width="500"
      :before-close="handleClose">
    <el-form ref="addSetupDom" :model="formData" :rules="rules" label-width="120px" label-position="top">
      <el-form-item label="聊天模型" prop="chatModel">
        <el-select placeholder="请选择" v-model="formData.chatModel">
          <el-option v-for="el in chatModels" :key="el.id" :label="el.name" :value="el.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="嵌入模型" prop="embeddingModel">
        <el-select placeholder="请选择" v-model="formData.embeddingModel">
          <el-option v-for="el in embeddingModels" :key="el.id" :label="el.name" :value="el.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Img2txt模型">
        <el-select placeholder="请选择" v-model="formData.img2txtModel">
          <el-option v-for="el in img2txtModels" :key="el.id" :label="el.name" :value="el.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Sequence2txt模型">
        <el-select placeholder="请选择" v-model="formData.sequence2txtModel">
          <el-option v-for="el in sequence2txtModels" :key="el.id" :label="el.name" :value="el.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Rerank模型">
        <el-select placeholder="请选择" v-model="formData.rerankModel">
          <el-option v-for="el in rerankModelModels" :key="el.id" :label="el.name" :value="el.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="TTS模型">
        <el-select placeholder="请选择" v-model="formData.ttsModel">
          <el-option v-for="el in ttsModels" :key="el.id" :label="el.name" :value="el.name"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="onSubmit">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>